<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 设置字符编码为 UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置页面标题 -->
    <title>Weather Line Chart</title>
    <script src="chart.js"></script>
    <script src="ras_chart.js"></script>
    <style>
        /* 设置页面背景颜色 */
        body {
            background-color: #f4f4f4;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        /* 设置画布样式 */
        canvas {
            border: 1px solid #ccc;
            max-width: 800px; /* 限制画布宽度 */
        }
    </style>
</head>

<body>
<!-- 创建一个画布元素，用于绘制图表 -->
<canvas id="weatherChart"></canvas>
<script>
        // 获取画布元素
        const ctx = document.getElementById('weatherChart').getContext('2d');

        // 创建一个新的 Chart 实例
        const myChart = new Chart(ctx, {
            // 指定图表类型为折线图
            type: 'line',
            data: {
                // 设置 x 轴的标签，这里表示不同的时间点
                labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                datasets: [
                    {
                        label: 'Temperature (°C)', // 温度
                        data: [22, 25, 23, 26, 24, 27, 25],
                        borderColor: 'rgba(255, 99, 132, 1)', // 红色
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        fill: true,
                        borderWidth: 2,
                        pointRadius: 5,
                        pointBackgroundColor: 'rgba(255, 99, 132, 1)',
                        pointBorderColor: '#fff',
                        pointBorderWidth: 2
                    },
                    {
                        label: 'Humidity (%)', // 湿度
                        data: [60, 65, 63, 68, 62, 70, 66],
                        borderColor: 'rgba(54, 162, 235, 1)', // 蓝色
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        fill: true,
                        borderWidth: 2,
                        pointRadius: 5,
                        pointBackgroundColor: 'rgba(54, 162, 235, 1)',
                        pointBorderColor: '#fff',
                        pointBorderWidth: 2
                    },
                    {
                        label: 'Light Lux', // 光照强度
                        data: [100, 120, 110, 130, 115, 140, 125],
                        borderColor: 'rgba(75, 192, 192, 1)', // 绿色
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        fill: true,
                        borderWidth: 2,
                        pointRadius: 5,
                        pointBackgroundColor: 'rgba(75, 192, 192, 1)',
                        pointBorderColor: '#fff',
                        pointBorderWidth: 2
                    },
                    {
                        label: 'Smoke Concentration', // 烟雾浓度
                        data: [0.1, 0.2, 0.15, 0.3, 0.25, 0.4, 0.35],
                        borderColor: 'rgba(255, 206, 86, 1)', // 黄色
                        backgroundColor: 'rgba(255, 206, 86, 0.2)',
                        fill: true,
                        borderWidth: 2,
                        pointRadius: 5,
                        pointBackgroundColor: 'rgba(255, 206, 86, 1)',
                        pointBorderColor: '#fff',
                        pointBorderWidth: 2
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true, // y 轴从 0 开始
                        title: {
                            display: true,
                            text: 'Value'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Day of the Week'
                        }
                    }
                },
                plugins: {
                    legend: {
                        position: 'top'
                    }
                }
            }
        });
    </script>
</body>

</html>
